<template>
  <contents :heightInclude="['tabBar']" class="new_address_page">
    <u-form
      :model="form"
      ref="form"
      label-width="165"
      :label-style="{ paddingRight: '15rpx' }"
    >
      <u-form-item :label="$t('locales.nameOfConsignee')" prop="consignee">
        <u-input
          v-model="form.consignee"
          :placeholder="$t('locales.inputConsignee')"
          maxlength="20"
        />
      </u-form-item>
      <u-form-item :label="$t('locales.contactNumber')" prop="mobile">
        <u-input
          v-model="form.mobile"
          :placeholder="$t('locales.inputPhone')"
          maxlength="11"
        />
      </u-form-item>
      <u-form-item :label="$t('locales.hostCountry')" prop="country">
        <u-input
          :border="false"
          type="select"
          :select-open="showCountry"
          v-model="form.country"
          :placeholder="$t('locales.switchCountry')"
          @click="showCountry = true"
        ></u-input>
      </u-form-item>
      <u-form-item :label="$t('locales.provinceState')" prop="prov">
        <u-input
          :border="false"
          type="select"
          :select-open="showCountry1"
          v-model="form.prov"
          :placeholder="$t('locales.provinceState')"
          @click="getRegiso(2, form.countryId)"
        ></u-input>
      </u-form-item>
      <template v-if="form.countryId === 1">
        <u-form-item :label="$t('locales.city')" prop="city">
          <u-input
            :border="false"
            type="select"
            :select-open="showCountry2"
            v-model="form.city"
            :placeholder="$t('locales.city')"
            @click="getRegiso(3, form.provId)"
          ></u-input>
        </u-form-item>
      </template>
      <template v-else>
        <u-form-item :label="$t('locales.city')" prop="city">
          <u-input
            v-model="form.city"
            :placeholder="$t('locales.blur')"
            maxlength="256"
          />
        </u-form-item>
      </template>

      <u-form-item :label="$t('locales.postCode')" prop="postcode">
        <u-input
          v-model="form.postcode"
          :placeholder="$t('locales.blur')"
          maxlength="256"
        />
      </u-form-item>

      <u-form-item :label="$t('locales.detailedAddress')" prop="address">
        <u-input
          type="textarea"
          v-model="form.address"
          :placeholder="$t('locales.inputDetailedAddress')"
          maxlength="150"
        />
      </u-form-item>
    </u-form>
    <u-picker
      v-model="showCountry"
      mode="selector"
      :range="countryList"
      range-key="name"
      @confirm="pickerConfirm"
    ></u-picker>

    <u-picker
      v-model="showCountry1"
      mode="selector"
      :range="countryList1"
      range-key="name"
      @confirm="pickerConfirm1"
    ></u-picker>

    <u-picker
      v-model="showCountry2"
      mode="selector"
      :range="countryList2"
      range-key="name"
      @confirm="pickerConfirm2"
    ></u-picker>
    <SubmitBtn @click="submit" />
  </contents>
</template>

<script>
import SubmitBtn from '@/components/submitBtn'
import { addAddress, addressDetail, countryCurrency } from '@/api/http/user'
export default {
  components: {
    SubmitBtn
  },
  data() {
    return {
      form: {
        address: '',
        consignee: '',
        mobile: '',
        id: '',
        country: '',
        countryId: '',
        provId: '',
        prov: '',
        cityId: '',
        city: '',
        postcode: '',
        iso: '',
        region: ''
      },
      showRegion: false,
      showCountry: false,
      showCountry1: false,
      showCountry2: false,
      countryList: [],
      countryList1: [],
      countryList2: [],
      rules: {
        country: [
          {
            required: true,
            message: this.$t('locales.switchRgeion'),
            trigger: 'blur'
          }
        ],
        prov: [
          {
            required: true,
            message: this.$t('locales.provinceState'),
            trigger: 'blur'
          }
        ],
        city: [
          {
            required: true,
            message: this.$t('locales.city'),
            trigger: 'blur'
          }
        ],
        region: [
          {
            required: true,
            message: this.$t('locales.blur') + this.$t('locales.blur'),
            trigger: 'blur'
          }
        ],
        consignee: [
          {
            required: true,
            message: this.$t('locales.inputConsignee'),
            trigger: 'blur'
          }
        ],
        mobile: [
          {
            required: true,
            message: this.$t('locales.inputPhone'),
            trigger: 'blur'
          }
        ],
        address: [
          {
            required: true,
            message: this.$t('locales.inputDetailedAddress'),
            trigger: 'blur'
          }
        ],

        prov: {
          required: true,
          message: this.$t('locales.blur') + this.$t('locales.blur'),
          trigger: 'blur'
        },

        postcode: [
          {
            required: true,
            message: this.$t('locales.blur') + this.$t('locales.postCode'),
            trigger: 'blur'
          },
          {
            required: true,
            validator: (rule, value, callback) => {
              return this.$u.test.enOrNum(value)
            },
            message: this.$t('locales.postCodeErr'),
            trigger: 'blur'
          }
        ]
      }
    }
  },
  onLoad(opt) {
    this.getData(opt.id)
  },
  onReady() {
    this.$refs.form.setRules(this.rules)
  },
  methods: {
    async getData(id) {
      await this.getRegiso(1, 0)
      if (!id) return
      addressDetail({
        id
      }).then((res) => {
        if (res.code === 200) {
          this.form = res.data
        } else {
          uni.showToast({
            icon: 'none',
            title: res.message
          })
        }
      })
    },
    getRegiso(level = 1, parentId) {
      if (level == 2 && !parentId) {
        return uni.showToast({
          icon: 'none',
          title: this.$t('locales.switchCountry')
        })
      }
      if (level == 3 && !parentId) {
        return uni.showToast({
          icon: 'none',
          title: this.$t('locales.provinceState')
        })
      }
      return countryCurrency({
        level,
        parentId
      }).then((res) => {
        if (res.code === 200) {
          if (level === 1) {
            this.countryList = res.data
          }
          if (level === 2) {
            this.countryList1 = res.data
            this.showCountry1 = true
          }
          if (level === 3) {
            this.countryList2 = res.data
            this.showCountry2 = true
          }
          return res.data
        } else {
          uni.showToast({
            icon: 'none',
            title: res.message
          })
        }
      })
    },
    // 国家
    pickerConfirm(row) {
      const data = this.countryList[row[0]]
      this.form.countryId = data.countryAndAreaId
      this.form.country = data.name
      this.form.iso = data.iso

      // 清空省市区
      this.form.provId = ''
      this.form.prov = ''

      this.form.cityId = ''
      this.form.city = ''
      this.form.postcode = ''
    },
    // 省
    pickerConfirm1(row) {
      const data = this.countryList1[row[0]]
      this.form.provId = data.countryAndAreaId
      this.form.prov = data.name

      this.form.cityId = ''
      this.form.city = ''
      this.form.postcode = ''
    },
    // 市
    pickerConfirm2(row) {
      const data = this.countryList2[row[0]]
      this.form.cityId = data.countryAndAreaId
      this.form.city = data.name
      this.form.postcode = data.value
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if (!valid) return
        if (!this.form.cityId) {
          this.form.cityId = 0
        }
        addAddress({
          ...this.form
        }).then((res) => {
          uni.showToast({
            icon: 'none',
            title: res.message
          })
          if (res.code === 200) {
            setTimeout(() => {
              uni.navigateBack()
            }, 1000)
          }
        })
      })
    }
  }
}
</script>

<style lang="scss">
.new_address_page {
  .u-form {
    padding: 0 30rpx;
    background-color: #fff;
  }
}
</style>
